<template>
  <div class='bigFile'>
    <div v-if="isHidden" class='btn'>
      <el-button @click='clickOpenFile' plain size='large'
      >+ 添加附件
      </el-button
      >
    </div>
    <div class='list'>
      <div class='item' v-for='item,index in bigFileArr' :key='index'>

        <template v-if='item.original_filename'>
          <svg class='coloricon' aria-hidden='true'>
            <use :xlink:href="'#' + getFileIcon(item.original_filename)"></use>
          </svg>

          <a href='javascript:void(0)' @click='goDownLoad(item)'>{{ giveEllipsisStr(item.original_filename, 30) }}</a>

          <div v-if="isHidden" class='close' @click='delRowBigFile(index)'>×</div>
        </template>

      </div>
    </div>


    <el-dialog
      v-model='ziliaoState'
      title='大附件'
      :width='width'
      :show-close='false'
      :close-on-click-modal='false'
      align-center
    >
      <upload-alias
        ref='UploadRef'
        v-model:bigCfmState='bigCfmState'
        :height="height"
      ></upload-alias>


      <template #footer>
            <span class='dialog-footer'>

              <el-popconfirm
                title='是否确认取消当前上传任务？'
                @confirm='otherBigFileCancel'
                v-if='store.uploadFileList.length'
              >
                <template #reference>
                  <el-button>取消</el-button>
                </template>
              </el-popconfirm>
              <el-button v-else @click='ziliaoState=false'>取消</el-button>



              <el-button
                type='primary'
                @click='otherBigFileConfirm'
                :disabled='bigCfmState'
              >确认</el-button
              >
            </span>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import {
  getFileIcon,
  giveEllipsisStr,
  downLoadFile,

} from '@/utils/common';
import {GetQueryValue1} from '@/utils/minioUpload';
import UploadAlias from './children/UploadAlias.vue';
import {delMinFile, delChunk} from '@/api/minIOupload';
import uploadStore from '@/store/modules/upload'

const store = uploadStore();

const UploadRef = ref();
const bigCfmState = ref(true);
const ziliaoState = ref(false);
const bigFileArr = ref([]);
const emits = defineEmits(['fileArrChange']);
const props = defineProps({
  fileArr: {
    type: Array,
    default: () => [],
  },
  width: {
    type: String,
    default: '900px'
  },
  height: {
    type: String
  },
  isHidden:{
    type:Boolean,
    default:true
  }
});

bigFileArr.value = props.fileArr || [];

watch(() => props.fileArr, (nv) => {
  bigFileArr.value = nv || [];
}, {
  deep: true,
});

watch(() => store.uploadFileList, (nv) => {
  let bool = false;
  if (nv.length) {
    bool = nv.every(item => {
      return item.status == '上传成功';
    });
  } else {
    bool = false;
  }
  if (bool) {
    bigCfmState.value = false;
  } else {
    bigCfmState.value = true;
  }
}, {
  deep: true,
});



// 下载附件
const goDownLoad = (item) => {
  // item指每一条资料的信息，是一个对象
  // if (item.readOnly) return ElMessage.warning('您没有该权限！')
  downLoadFile(item);
};

//点击打开上传附件
const clickOpenFile = () => {
  ziliaoState.value = true;
  bigCfmState.value = true;
};


//点击删除一个已经上传的附件
const delRowBigFile = (idx) => {
  console.log(idx);
  bigFileArr.value.splice(idx,1)
  
};


//点击取消 并在弹出框中点了确认按钮
const otherBigFileCancel = async () => {
  UploadRef.value.cancelState = true;
  ziliaoState.value = false;


  let ossIdArr = [];
  let uploadArr = [];
  store.uploadFileList.forEach(item => {
    console.log(item);
    if (item.status == '上传成功') {
      ossIdArr.push(item.ossId);
    } else if (item.status == '正在上传') {
      let url = item.chunkList[0].uploadUrl;
      let uploadId = GetQueryValue1('uploadId', url);
      uploadArr.push(uploadId);
    }
  });

  await delMinFile({
    keys: ossIdArr,
  });

  await delChunk({
    keys: uploadArr,
  });


  //初始化上传控件的数组
  initUploadFile();
};


//点击确定按钮
const otherBigFileConfirm = () => {
  ziliaoState.value = false;
  let temArr = [];
  store.uploadFileList.forEach(item => {
    console.log(item);
    if (item.status != '上传成功') {
      return;
    }
    let obj = {
      file_id: item.file_id,
      original_filename: item.name
    };
    temArr.push(obj);
  });

  //获取upload组件内资料的关联
  let selfArr = UploadRef.value.selfSelectArr;

  bigFileArr.value.push(
    ...temArr,
    ...selfArr,
  );


  //点击确认，修改vuex
  initUploadFile();
};


//点击确认或者取消初始化上次数组
const initUploadFile = () => {
  store.setUploadFileList([]);
  UploadRef.value.selfSelectArr.length = 0;
  let materArr = UploadRef.value.materArr;
  materArr.forEach(item => {
    item.checked = false;
  });
  UploadRef.value.materArr = materArr;
  console.log(bigFileArr.value);
};


watch(() => bigFileArr.value, (nv) => {
  bigFileArr.value = nv;
  emits('fileArrChange', bigFileArr.value);
}, {
  deep: true,
});


defineExpose({
  bigFileArr,
});


</script>

<style lang='scss' scoped>

.bigFile {
  .list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;

    .item {
      padding-right: 35px;
      display: flex;
      align-items: center;
      font-size: 15px;
      position: relative;
      margin-bottom: 10px;

      a {
        color: #666;
      }

      .coloricon {
        font-size: 25px;
        margin-right: 5px;
      }

      .close {
        font-size: 22px;
        color: #ff5733;
        position: absolute;
        right: 5px;
        top: 0px;
        display: none;
        cursor: pointer;
        line-height: 1em;
      }

      &:hover {
        .close {
          display: block;
        }
      }
    }
  }
}
</style>
